'use strict';
import React from "react";
import {ListView,
    RefreshControl,
    StyleSheet,
    View,
    Text,
    Image,
    TouchableOpacity,
    Animated,
    ActivityIndicator,
    InteractionManager
    } from "react-native";
import ParallaxScrollView from "react-native-parallax-scroll-view";
import FixedHeader from "../Components/FixedHeader";
import BottomShareView from '../Components/BottomShareView';
import ImageViewer from "../Pages/ImageViewer";
import {_renderStickyHeader} from "../Utils/ViewUtils";
import CommentList from "../Components/CommentList";
import BottomStrategyBtn from '../Components/BottomStrategyBtn';
import FoundAPIService from "../Commom/FoundAPIService";
import Global from "../Commom/GlobalConst";
import Toast from "../Utils/toast";
import WebContainer from "../Components/WebContainer";
import RuralMapPage from '../Pages/RuralMapPage';
const width = Global.Const.size.width;
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F2F3F5'
    },

});

class StrategyDetailPage extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            paddingBottom: new Animated.Value(0),
            flag: false,
            strategy:{},
            images: [],
            commentList:[],
            // commentList:[{name: "蓝色湖畔", avatar: "http://wx.qlogo.cn/mmhead/1gvL9ficRs1GcbcZ0  ibQdqKT6h0ibw4DEh8HroUbAD5HyzQ5Wf6cQs8SQ/0", time: "2017-10-26 16:28:49", images: null, content: "去过，还不错"},{name: "蓝色湖畔", avatar: "http://wx.qlogo.cn/mmhead/1gvL9ficRs1GcbcZ0ibQdqKT6h0ibw4DEh8HroUbAD5HyzQ5Wf6cQs8SQ/0", time: "2017-10-26 16:28:49", images: null, content: "去过，还不错"}]
        };
    }

    componentDidMount() {
        let id = this.props.ID;
        InteractionManager.runAfterInteractions(() => {
            FoundAPIService.raiders_detail(id).then((ret)=> {
                var image=ret.result.image;
                var images=[];
                images.push(image);
                console.log(images);
                this.setState({
                    strategy: ret.result,
                    commentList: ret.result.commemt_list,
                    images:images,
                    flag:true,
                });
            }).catch((err)=> {

            });
        });
    }



    viewPagerItemClick() {
        this.props.navigator.push({
            name: 'ImageViewer',
            component: ImageViewer,
            passProps: {
                source: this.state.images,
            }
        })
    }

    _renderViewPager() {
        return (
            <View style={{height: 245,width,}}>
                {this.state.images.length > 1 ? <ViewPager
                    locked={false}
                    isLoop={true}
                    autoPlay={true}
                    renderPageIndicator={false}
                    renderPage={(page) => {
                        return (
                            <TouchableOpacity onPress={() => this.viewPagerItemClick()}>
                                <Image source={{uri:page}}
                                       style={{height: 245,width,}}
                                />
                            </TouchableOpacity>
                        )
                    }}
                    dataSource={this.state.dataSource}
                />
                    :
                    <TouchableOpacity onPress={() => this.viewPagerItemClick()}>
                        <Image source={{uri:this.state.images[0]}}
                               style={{height: 245,width,}}
                        />
                    </TouchableOpacity>}

            </View>
        )
    }
    refreshComments() {
        console.log('refreshComments');
        let id = this.props.ID;
        FoundAPIService.raiders_detail(id).then((ret)=> {
            this.setState({
                commentList: ret.result.commemt_list,
            });
        }).catch((err)=> {

        });
    }
    recommend(id){
        const {navigator} = this.props;
        if (navigator) {
            navigator.push({
                name: 'StrategyDetailPage',
                component: StrategyDetailPage,
                passProps: {
                    ID:id
                }
            });
        }
    }
    getHtml(html){
        return '<!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf8" /><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0"></head><body>' + html + '</body></html>';
    }
    render() {

        return (
            <Animated.View style={[styles.container, {paddingBottom: this.state.paddingBottom}]}>
                {
                    this.state.flag ? <ParallaxScrollView
                        showsVerticalScrollIndicator={false}
                        contentBackgroundColor={'white'}
                        backgroundColor={'white'}
                        headerBackgroundColor="#333"
                        stickyHeaderHeight={ 65 }
                        parallaxHeaderHeight={ 245 }
                        backgroundSpeed={10}
                        renderForeground={() => this._renderViewPager()}
                        renderStickyHeader={() => _renderStickyHeader('')}
                        renderFixedHeader={() => {
                            return (
                                <FixedHeader navigator={this.props.navigator}
                                             rightFunc={() => {
                                                 this.shareView.showShareView();
                                             }}/>
                            )
                        }}
                    >
                        <View style={{flex: 1, backgroundColor: 'white'}}>
                            <Text numberOfLines={2} style={{marginTop:10,width:Global.Const.size.width-20,lineHeight:28,marginLeft:10,color:'black',fontSize:17}}>{this.state.strategy.title}</Text>
                             <View style={{width:Global.Const.size.width,flexDirection:'row',marginTop:15}}>
                                 <Image resizeMode='cover' source={{uri:this.state.strategy.avatar}}
                                        style={{marginTop:5,width: 38, height: 38,marginLeft:10,borderRadius:19}}/>
                                 <View style={{marginLeft:8,width:Global.Const.size.width-68}}>
                                     <Text style={{color:'black',fontSize:14}}>{this.state.strategy.name}</Text>
                                     <Text style={{color:'#696969',marginTop:5,fontSize:12}}>{this.state.strategy.descript}</Text>
                                 </View>
                             </View>
                            <View style={{width:Global.Const.size.width,alignItems:'center',marginTop:20}}>
                                <Text style={{color:'black',fontSize:16}}>{this.state.strategy.html_title}</Text>
                            </View>
                            <WebContainer html={this.getHtml(this.state.strategy.html_content)} />
                            <View style={{width:Global.Const.size.width,height:7,backgroundColor:Global.Const.transparent}}/>
                            {this.state.strategy.recommend_id!==null&&this.state.strategy.recommend_id!==''&&this.state.strategy.recommend_image!==''?
                                <View>
                                    <Text style={{marginLeft:10,marginTop:10,color:Global.FontColor.DarkGray}}>推荐</Text>
                                    <TouchableOpacity onPress={() => this.recommend(this.state.strategy.recommend_id)}>
                                        <View style={{width:Global.Const.size.width,height:100,flexDirection:'row',alignItems:'center'}}>
                                            <Image resizeMode='cover' source={{uri:this.state.strategy.recommend_image}}
                                                style={{width: 110, height: 90,marginLeft:10}}/>
                                                <View style={{width:Global.Const.size.width-140,height:100,marginLeft:10}}>
                                                    <Text style={{color:'black',fontSize:15,marginTop:5}}>{this.state.strategy.recommend_title}</Text>
                                                    <Text numberOfLines={4}  style={{color:Global.FontColor.LightGrey,fontSize:12,marginTop:10}}>{this.state.strategy.recommend_content}</Text>
                                            </View>
                                        </View>
                                    </TouchableOpacity>
                                </View>
                                :null}

                            <Text style={{marginLeft:10,marginTop:10,color:Global.FontColor.DarkGray}}>店铺</Text>
                            <View style={{width:Global.Const.size.width,height:150,justifyContent:'center',alignItems:'center',marginTop:10}}>
                                <Image style={{width:Global.Const.size.width,height:150,position: 'absolute',left: 0,top: 0}}
                                       source={{uri: 'http://s16.sinaimg.cn/middle/5385fbf34962e153b322f&amp;690'}}>
                                </Image>
                                {this.state.strategy.latitude? <TouchableOpacity onPress={() => {
                                                this.props.navigator.push({
                                                    name: 'RuralMapPage',
                                                    component: RuralMapPage,
                                                    passProps: {
                                                        latitude: this.state.strategy.latitude,
                                                        longitude: this.state.strategy.longitude,
                                                    },
                                                })
                                            }}>
                                        <Image style={{width:40,height:40}}
                                               source={require('../../Image/icon_watch_map.png')}>

                                        </Image>
                                    </TouchableOpacity>:null}
                            </View>
                            <View style={{width:Global.Const.size.width,flexDirection:'row',paddingTop:10}}>
                                <Text style={{color:Global.FontColor.DarkGray,marginLeft:10}}>地      址</Text>
                                <Text style={{color:Global.FontColor.DimGray,marginLeft:10,marginRight:55}}>{this.state.strategy.address}</Text>
                            </View>
                            <View style={{width:Global.Const.size.width,height:35,alignItems:'center',flexDirection:'row',marginTop:12}}>
                                <Text style={{color:Global.FontColor.DarkGray,marginLeft:10}}>咨询电话</Text>
                                <Text style={{color:Global.FontColor.DimGray,marginLeft:10}}>{this.state.strategy.phone}</Text>
                            </View>
                            <View style={{width:Global.Const.size.width,height:35,alignItems:'center',flexDirection:'row',marginBottom:10}}>
                                <Text style={{color:Global.FontColor.DarkGray,marginLeft:10}}>价      格</Text>
                                <Text style={{color:'red',marginLeft:10}}>￥{this.state.strategy.price}元</Text>
                            </View>
                            <View style={{width:Global.Const.size.width,height:1,backgroundColor:Global.Const.transparent}}/>
                            <CommentList showTop={true} commentList={this.state.commentList}
                                         id={this.state.strategy.id} type={5}
                                         navigator={this.props.navigator}/>
                        </View>
                    </ParallaxScrollView>
                        :
                        <View style={{flex:1,backgroundColor:'#F5F5F5'}}><View
                            style={{position: 'absolute',top:0,left:0,width:Global.Const.size.width,height:Global.Const.size.height,backgroundColor:null,alignItems:'center',justifyContent:'center'}}>
                            <View
                                style={{backgroundColor:'#333333',borderRadius:5, alignItems: 'center',justifyContent: 'center',width:80,height:80}}>
                                <ActivityIndicator
                                    animating={this.state.animating}
                                    style={{ alignItems: 'center',justifyContent: 'center'}}
                                    size="large"/>
                                <Text style={{color:'white'}}>加载中...</Text>
                            </View>
                        </View>
                        </View>
                }
                <BottomShareView
                    shareTitle={this.state.strategy.title}
                    shareContent={this.state.strategy.descript}
                    shareImageUrl={this.state.images[0]}
                    shareUrl={'http://xc.xiarikui.cn/Api/Index/share'}
                    ref={(ref) => {this.shareView = ref;}}/>
                <BottomStrategyBtn
                    navigator={this.props.navigator}
                    id={this.state.strategy.id}
                    type={5}
                    phone={this.state.strategy.phone+''}
                    refreshComments={()=>this.refreshComments()}
                />
            </Animated.View>
        )
    }


}
export default StrategyDetailPage;